<template>
  <div class="box">
    <el-col :span="24">
      <div class="bg-purple-dark">
        <div class="cardInformation">
          <div class="blueIcon" />
          <div class="dataName">记录列表</div>
          <div class="recentlyDay">更新时间：{{ updateData }}</div>
        </div>
        <div class="r-card-header">
          <Rsearch
            v-model="inputContent"
            :placeholder="'请输入公司名称搜索'"
            style="width:235px"
            @search="onSearchName"
          />
          <el-button type="primary" @click="onSearchName(inputContent)">搜索</el-button>
        </div>
      </div>
    </el-col>
    <div v-if="tenantPageData.records&&!!tenantPageData.records.length" class="list">
      <div v-for="(item,index) in tenantPageData.records" :key="index" class="elCol">
        <div class="firmTitle">
          {{ item.tenantName }}
          <div class="stateDot" :style="{backgroundColor:item.dau>0?'#1de270':'#DFDFDF'}" />
        </div>
        <div class="primaryNum">账号数：<span>{{ item.accountNum }}</span></div>
        <div class="numList">
          <div class="startNname">今日启动量<div class="startNum">{{ item.dau }}</div></div>
          <div class="line" />
          <div class="startNname">本周启动量<div class="startNum">{{ item.wau }}</div></div>
          <div class="line" />
          <div class="startNname">本月启动量<div class="startNum">{{ item.mau }}</div></div>
        </div>
        <div class="loginTime">
          最近活跃时间:<span>{{ item.lastLoginTime }}</span>
        </div>
        <div class="toDetail" @click="toDetail(item.tenantId)">查看详情</div>
      </div>
    </div>
    <NoData v-if="tenantPageData.records &&!tenantPageData.records.length" />
    <el-pagination
      background
      layout="prev, pager, next"
      :total="tenantPageData.total"
      :page-size="conditions.size"
      @current-change="nextPage"
    />
  </div>
</template>

<script>
import Rsearch from '@/components/r-input/r-search'
import { mapState } from 'vuex'
import moment from 'moment'
import NoData from '@/components/NoData'

var minutes = 'YYYY-MM-DD HH:mm:ss'
var now = new Date() // 当前日期

export default {
  components: {
    Rsearch,
    NoData
  },
  data() {
    return {
      updateData: moment(now).format(minutes),
      conditions: {
        current: 1,
        size: 20
      },
      tabList: [
        '今日启动量',
        '周启动量',
        '月启动量'
      ],
      inputContent: ''
    }
  },
  computed: {
    ...mapState('monitor', [
      'tenantPageData', // 分页查询活跃租户
    ]),
  },
  watch: {
    'conditions': {
      handler(newName, oldName) {
        this.$store.dispatch('monitor/getMonitorTenantPage', {...newName})
      },
      immediate: true
    }
  },
  methods: {
    // 查询
    onSearchName(tenantName) {
      this.conditions = Object.assign({}, this.conditions, { tenantName })
    },
    onSearch(c) {
      this.conditions = Object.assign({}, this.conditions, c)
    },
    changeDesc(index, id) {
      if (index === 0) {
        this.byOrder.dayId = id
      }
      if (index === 1) {
        this.byOrder.weekId = id
      }
      if (index === 2) {
        this.byOrder.mothId = id
      }
    },
    toDetail(id) {
      this.$router.push({path: '/monitoringPlatform/clientList/clientDetail', query: {setid: id}})
    },
    nextPage(e) {
      this.$store.dispatch('monitor/getMonitorTenantPage', {current: e, size: 20})
    },
  }
}
</script>

<style scoped lang='scss'>
  @import './style'
</style>
